<div>
    <h2 data-translate="byibserverApp.product.home.title">Products</h2>
    <jhi-alert></jhi-alert>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-4 no-padding-left">
                <button class="btn btn-primary" ui-sref="product.new" >
                    <span class="glyphicon glyphicon-plus"></span>
                    <span class="hidden-xs-down"  data-translate="byibserverApp.product.home.createLabel">
                        Create new Product
                    </span>
                </button>
            </div>
            <div class="col-xs-8 no-padding-right">
                <form name="searchForm" class="form-inline">
                    <div class="input-group pull-right" >
                        <input type="text" class="form-control" ng-model="vm.searchQuery" id="searchQuery" placeholder="{{ 'byibserverApp.product.home.search' | translate }}">
                        <span  class="input-group-btn width-min" >
                            <button class="btn btn-info" ng-click="vm.search(vm.searchQuery)">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                        <span class="input-group-btn width-min" ng-if="vm.currentSearch">
                            <button class="btn btn-info" ng-click="vm.clear()">
                                <span class="glyphicon glyphicon-trash"></span>
                            </button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <br/>
    <div class="table-responsive">
        <table class="jh-table table table-striped">
            <thead>
                <tr jh-sort="vm.predicate" ascending="vm.reverse" callback="vm.transition()">
                    <th jh-sort-by="id"><span data-translate="global.field.id">ID</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="productName"><span data-translate="byibserverApp.product.productName">Product Name</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="productImg"><span data-translate="byibserverApp.product.productImg">Product Img</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="overallScore"><span data-translate="byibserverApp.product.overallScore">Overall Score</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="amountOfIndemnificationSocre"><span data-translate="byibserverApp.product.amountOfIndemnificationSocre">Amount Of Indemnification Socre</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="ensureScopeSocre"><span data-translate="byibserverApp.product.ensureScopeSocre">Ensure Scope Socre</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="claimsSettlementSocre"><span data-translate="byibserverApp.product.claimsSettlementSocre">Claims Settlement Socre</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="convenientServicetSocre"><span data-translate="byibserverApp.product.convenientServicetSocre">Convenient Servicet Socre</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="strichenClaimTimes"><span data-translate="byibserverApp.product.strichenClaimTimes">Strichen Claim Times</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="mildClaimTimes"><span data-translate="byibserverApp.product.mildClaimTimes">Mild Claim Times</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="strichenNum"><span data-translate="byibserverApp.product.strichenNum">Strichen Num</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="mildNum"><span data-translate="byibserverApp.product.mildNum">Mild Num</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="stricheProbability"><span data-translate="byibserverApp.product.stricheProbability">Striche Probability</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="mildProbability"><span data-translate="byibserverApp.product.mildProbability">Mild Probability</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="dcRate"><span data-translate="byibserverApp.product.dcRate">Dc Rate</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="expertOverallScore"><span data-translate="byibserverApp.product.expertOverallScore">Expert Overall Score</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="purchaseLink"><span data-translate="byibserverApp.product.purchaseLink">Purchase Link</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="insurerCorporateName"><span data-translate="byibserverApp.product.insurer">Insurer</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th jh-sort-by="typesOfInsuranceTypesOfInsuranceName"><span data-translate="byibserverApp.product.typesOfInsurance">Types Of Insurance</span> <span class="glyphicon glyphicon-sort"></span></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="product in vm.products track by product.id">
                    <td><a ui-sref="product-detail({id:product.id})">{{product.id}}</a></td>
                    <td>{{product.productName}}</td>
                    <td>{{product.productImg}}</td>
                    <td>{{product.overallScore}}</td>
                    <td>{{product.amountOfIndemnificationSocre}}</td>
                    <td>{{product.ensureScopeSocre}}</td>
                    <td>{{product.claimsSettlementSocre}}</td>
                    <td>{{product.convenientServicetSocre}}</td>
                    <td>{{product.strichenClaimTimes}}</td>
                    <td>{{product.mildClaimTimes}}</td>
                    <td>{{product.strichenNum}}</td>
                    <td>{{product.mildNum}}</td>
                    <td>{{product.stricheProbability}}</td>
                    <td>{{product.mildProbability}}</td>
                    <td>{{product.dcRate}}</td>
                    <td>{{product.expertOverallScore}}</td>
                    <td>{{product.purchaseLink}}</td>
                    <td>
                        <a ui-sref="isurer-detail({id:product.insurerId})">{{product.insurerCorporateName}}</a>
                    </td>
                    <td>
                        <a ui-sref="types-of-insurance-detail({id:product.typesOfInsuranceId})">{{product.typesOfInsuranceTypesOfInsuranceName}}</a>
                    </td>
                    <td class="text-right">
                        <div class="btn-group flex-btn-group-container">
                            <button type="submit"
                                    ui-sref="product-detail({id:product.id})"
                                    class="btn btn-info btn-sm">
                                <span class="glyphicon glyphicon-eye-open"></span>
                                <span class="hidden-sm-down" data-translate="entity.action.view"></span>
                            </button>
                            <button type="submit"
                                    ui-sref="product.edit({id:product.id})"
                                    class="btn btn-primary btn-sm">
                                <span class="glyphicon glyphicon-pencil"></span>
                                <span class="hidden-sm-down" data-translate="entity.action.edit"></span>
                            </button>
                            <button type="submit"
                                    ui-sref="product.delete({id:product.id})"
                                    class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-remove-circle"></span>
                                <span class="hidden-sm-down" data-translate="entity.action.delete"></span>
                            </button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="text-center">
        <jhi-item-count page="vm.page" total="vm.queryCount" items-per-page="vm.itemsPerPage"></jhi-item-count>
        <uib-pagination class="pagination-sm" total-items="vm.totalItems" items-per-page="vm.itemsPerPage" ng-model="vm.page" ng-change="vm.transition()"></uib-pagination>
    </div>
</div>
